<!-- 确认订单 -->
<template>
    <page-view>
        <div class="w-full  my-shop-car-header bg-white   border-solid border-b-[2px] border-[#ff0000]">
            <div class="base-width py-[20px] flex flex-row justify-between ">
                <div class="flex flex-row items-end">
                    <img src="../../img/logo.png" class="w-[56px] h-[56px] cursor-pointer" @click="$router.push({name:'DataView'})" alt="">
                    <div class="flex-1 flex flex-row items-baseline ml-[40px]">
                        <div class="text-[22px]">确认订单</div>
                    </div>
                </div>
                <div class="flex flex-row items-center ">
                    <el-dropdown>
                        <span class="el-dropdown-link text-gray-500 font-bold">

                            {{ loginClientInfo.custom_realName }}

                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>人个中心</el-dropdown-item>
                                <el-dropdown-item divided @click="logOut">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>

                    </el-dropdown>
                    <span class="mx-2 text-gray-400">|</span>
                    <span class="mx-2 text-gray-500">我的订单</span>
                </div>
            </div>
        </div>
        <!-------------------------------------------------------->

        <div class="base-width py-[30px] px-[20px] bg-white mt-[30px] ">
            <span class="text-[#565f6c] text-[20px]">收货地址</span>
            <div class="grid grid-cols-4 gap-3 pt-10">
                <div :class="{ active: selectedAddressIndex === index }"
                    v-for="(item, index) in myAddressInfoList.listData" :key="item.id"
                    @click="selectedAddressIndex = index"
                    class="relative grid-item border border-solid border-[#9ca3af] h-[180px] p-20 flex flex-col justify-start text-[#565f6c]">
                    <p class="text-[20px] text-black ">{{ item.address_name }}</p>
                    <span>{{ item.address_tel.substr(0, 3) + "****" + item.address_tel.slice(-4) }}</span>
                    <span>{{ item.province }} {{ item.city }} {{ item.area }} {{ item.address_detail }}</span>
                    <div class="update-button w-full flex flex-row absolute justify-end ">
                        <el-button class="" type="primary" text>修改</el-button>
                    </div>
                </div>
                <div
                    class=" grid-item border border-solid border-[#9ca3af] h-[180px]  flex flex-row justify-center items-center text-[#48a2ff]">
                    <el-button :icon="CirclePlus" text type="primary" @click="drawer = true">
                        新增地址
                    </el-button>
                </div>
            </div>
            <div class="flex flex-row h-[40px] justify-center items-center my-5 bg-gray-100 cursor-pointer text-gray-500"
                @click="getNextPageAddress" v-if="myAddressInfoList.pageIndex < myAddressInfoList.pageCount">
                加载下一页地址数据
            </div>

        </div>
        <div class="base-width flex flex-col  px-[20px] bg-white mb-20">
            <h2 class="text-[20px] text-[#565f6c]">商品及优惠卷</h2>
            <el-table :data="checkoutOrderGoods" class="w-full">
                <el-table-column label="编号" width="60" align="center">
                    <template #default="{ $index }">{{ $index + 1 }}</template>
                </el-table-column>
                <el-table-column label="图片" width="100" align="center">
                    <template #default="{ row }">
                        <el-image :src="baseURL + row.goodsInfo.goods_photo[0]" class="w-[60px] h-[60px]" />
                    </template>
                </el-table-column>
                <el-table-column prop="goodsInfo.goods_name" label="商品名称"></el-table-column>
                <el-table-column label="价格数量" width="200" align="center">
                    <template #default="{ row }">
                        <span class=" text-[12px]">
                            {{ row.goodsInfo.goods_sale_price }}元 x {{ row.car_goods_num }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="总价" width="120">
                    <template #default="{ row }">
                        <span class="text-primary">{{ row.goodsInfo.goods_sale_price * row.car_goods_num }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex flex-row py-[23px] items-center border-b border-solid border-[#ebeef5]">
                <h2 class="text-[20px] text-[#565f6c]">配送方式</h2>
                <span class="text-[#ff9147] ml-[30px] text-[13px]">包邮</span>
            </div>
            <div class="flex flex-row py-[23px] items-center border-b border-solid border-[#ebeef5]">
                <h2 class="text-[20px] text-[#565f6c]">发票</h2>
                <span class="text-[#ff9147] ml-[30px] text-[13px]">电子普通发票个人商品明细修改 </span>
            </div>
            <ul class="total-info-ultext-[#565f6c] text-[14px] flex flex-col items-end">
                <li class="mt-[8px]"><span>商品总件数：</span><span class="text-[#ff9147] ml-[40px]">{{ goodsTotalCount
                }}件</span></li>
                <li class="mt-[8px]"><span>商品总价：</span><span class="text-[#ff9147]  ml-[40px]">{{ goodsTotalPrice
                }}元</span></li>
                <li class="mt-[8px]"><span>活动优惠：</span><span class="text-[#ff9147]  ml-[40px]">-0元</span></li>
                <li class="mt-[8px]"><span>优惠券抵扣：</span><span class="text-[#ff9147]  ml-[40px]">-0元</span></li>
                <li class="mt-[8px]"><span>运费：</span><span class="text-[#ff9147]  ml-[40px] ">0元</span></li>
                <li class="flex flex-row items-end"><span>应付总额：</span><span
                        class="text-[#ff9147]  text-[28px]  ml-[40px]">{{
                                goodsTotalPrice
                        }}元</span></li>
            </ul>
            <div class="flex flex-row justify-end mt-[20px] box-border py-[20px]">
                <el-button type="primary" class="w-[180px] h-[40px] border border-solid border-gray-400 text-gray-400 "
                    @click="$router.back()">返回购物车
                </el-button>
                <el-button @click="confirmSubmitOrder" type="success" class="w-[160px] h-[40px] bg-primary text-white ml-10">去结算
                </el-button>
            </div>
        </div>
        <!-------------------------------------------------------->
        <footer-menu></footer-menu>

        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
            <add-address></add-address>
        </el-drawer>
    </page-view>
</template>
<script setup>
import { ref, inject, computed, reactive } from "vue";
import { ArrowDown, Close, CirclePlus } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import API from "../../utils/API";
import { ElMessageBox } from "element-plus";
import { mainStore } from "../../store";
const drawer = ref(false);
const baseURL = inject("baseURL");
const router = useRouter();
const route = useRoute();
const store = mainStore();
const loginClientInfo = ref(mainStore().loginClientInfo);
const myAddressInfoList = reactive({
    listData: [],
    pageCount: 0,
    pageEnd: 0,
    pageIndex: 1,
    pageStart: 1,
    totalCount: 0,
})
const selectedAddressIndex = ref(-1);
const queryAddressData = reactive({
    pageIndex: 1
});
/**
 * 获取下一页地址的数据
 */
const isAddressInfoLoading = ref(false);
const getNextPageAddress = () => {
    if (myAddressInfoList.pageIndex < myAddressInfoList.pageCount) {
        queryAddressData.pageIndex++;
        isAddressInfoLoading.value = true;
    }
    API.addressInfo.getMyAddressInfoList(queryAddressData.pageIndex)
        .then(result => {
            console.log(result);
            myAddressInfoList.listData = result.listData;
            myAddressInfoList.pageCount = result.pageCount;
            myAddressInfoList.pageEnd = result.pageEnd;
            myAddressInfoList.pageIndex = result.pageIndex;
            myAddressInfoList.pageStart = result.pageStart;
            myAddressInfoList.totalCount = result.totalCount;
        })
        .finally(() => {
            isAddressInfoLoading.value = false;
        });
}
getNextPageAddress(queryAddressData.pageIndex);





/**
 * 获取确认订单的商品数据
 */
const isGetCheckoutOrderGoodsLoading = ref(false);
const checkoutOrderGoods = ref([]);
const getCheckoutOrderGoodsList = () => {
    isGetCheckoutOrderGoodsLoading.value = true;
    let Ids = route.params.Ids;
    API.shopCarInfo.getMyCheckoutShopCarList(Ids)
        .then(result => {
            console.log(result);
            result.forEach(item => {
                item.goodsInfo.goods_photo = JSON.parse(item.goodsInfo.goods_photo);
            });
            checkoutOrderGoods.value = result;
        })
        .catch(() => {
            ElMessageBox.alert("获取确认订单的商品数据失败");
        })
        .finally((data) => {
            isGetCheckoutOrderGoodsLoading.value = false;
        });
}
getCheckoutOrderGoodsList();
/**
 * 计算订单总商品数
 */
const goodsTotalCount = computed(() => {
    let totalCount = 0;
    checkoutOrderGoods.value.forEach(item => {
        totalCount += item.car_goods_num;
    });
    return totalCount;
});
/**
 * 计算订单总价格
 */
const goodsTotalPrice = computed(() => {
    let totalPrice = 0;
    checkoutOrderGoods.value.forEach(item => {
        totalPrice += item.car_goods_num * item.goodsInfo.goods_sale_price;
    });
    return totalPrice;
});
/**
 * 去结算，确认提交订单
 */
const isSubmitOrderLoading = ref(false);
const confirmSubmitOrder = () => {
    if (selectedAddressIndex.value === -1) {
        ElMessageBox.alert("请选择收货地址", "提示");
        return;
    }
    isSubmitOrderLoading.value = true;
    let orderInfo = {
        address_id: myAddressInfoList.listData[selectedAddressIndex.value].id,
        order_pay_type: 1,
        goodsList: checkoutOrderGoods.value.map(item => {
            return {
                goods_id: item.goods_id,
                goods_num: item.car_goods_num
            }
        })
    }
    API.orderInfo.submitOrder(orderInfo)
        .then(result => {
            router.push({ name: 'confirmOrder', params: { id: result } });
        })
        .catch(() => {
            ElMessageBox.alert("提交订单失败", "提示", {
                type: "error"
            });
        })
        .finally(() => {
            isSubmitOrderLoading.value = false;
        });
}




/**
 * 退出登录
 */
const logOut = () => {
    ElMessageBox.confirm("确定要退出登录吗？", "询问", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    })
        .then(() => {
            store.logOut();
            router.replace({ name: "Login" })
        })
        .catch(() => {
            console.log("取消退出登录");
        })
}
</script>
<style scoped lang="scss">
.active {
    @apply border-red-600 border-[3px]
}

.grid-item {
    .update-button {
        bottom: 6px;
        right: 10px;
    }
}
</style>
   